<template lang="">
    <div class="list">
        <Breadcrumb/>
        <!-- 2. 列表展示 -->
        <div class='header'>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
              <el-form-item label="订单编号" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入品牌名称"></el-input>
              </el-form-item>
              <el-form-item label="预定时间" label-width="100px">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1"
                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">至</el-col>
                <el-col :span="11">
                  <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="下单人" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="所属单位" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="汇总状态" label-width="100px">
                <el-select v-model="formInline.region" placeholder="全部">
                  <el-option label="全部" value="shanghai"></el-option>
                  <el-option label="未汇总" value="shanghai"></el-option>
                  <el-option label="已汇总" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
      </div>
        <!-- 3.订单列表按钮 -->
        <div class="header-btn">
            <el-button type="warning" size="mini" @click="orderCollect">订单汇总</el-button>
                <download-excel style="display: inline-block;margin-left: 10px;" :data="DetailsForm" :fields="json_fields" :header="title" :name="title">
                    <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                    <el-button class="order-btn" type="warning" size="small" @click="download">导出</el-button>
                </download-excel>
        </div>
        <!-- 4.表格展示数据 -->
        <div class="list-content">
             <el-table :data="tableData" border style="width: 100%" :header-row-style="{color: '#333', textAlign: 'center'}" @selection-change="selectChange">
                <el-table-column type="selection" width="55" :selectable="selectFun"></el-table-column>
                <el-table-column prop="code" label="订单编号" width="180">
                    <template slot-scope="scope">
                        <span @click="OrderDesc(scope.row)" style="color: blue; cursor: pointer">{{scope.row.code}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ordername" label="下单人" width="180"></el-table-column>
                <el-table-column prop="company" label="所属单位"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="yudingTime" label="预定时间">
                    <template slot-scope="scope">
                        <span>{{dayjs(scope.row.yudingTime).format('YYYY-MM-DD')}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="订单总价格"></el-table-column>
                <el-table-column prop="huizongStatus" label="汇总状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.huizongStatus === 1">未汇总</span>
                        <span v-else>已汇总</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 5.分页 -->
        <Pagination :total="total" :pageSize="pageSize" :current-page="currentPage" @getPagination="getPagination"/>

        <!-- 6.抽屉显示--订单详情   modal：取消遮罩层-->
        <el-drawer title="订单详情" :visible.sync="drawer" :direction="direction" :size="size" :modal="false">
            <orderDesc/>
        </el-drawer>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination';
import orderDesc from './orderDesc.vue';
import { orderList, setChangeStatus } from '@/api/order';
import dayjs from 'dayjs';

export default {
    components: {
        Pagination,
        orderDesc
    },
    data() {
        return {
            DetailsForm: [], // 导出的数据容器
            json_fields: {
                // "订单编号":"code",
                //数字处理--
                "订单编号": {
                    field: "code",
                    callback: value => {
                        return '&nbsp;' + value;
                    }
                },
                "下单人": "ordername",
                "所属单位": "company",
                "联系电话": {
                    field: "phone",
                    callback: value => {
                        return '&nbsp;' + value;
                    }
                },
                "预定时间": "yudingTime",
                "订单总价格": "price",
                "汇总状态": "huizongStatus"

            }, // 配置表格标题字段对应文字 
            title: '首客生鲜采购表格',
            selectIds: [], // 选择的ids
            tableData: [],
            total: 1,
            currentPage: 1,
            pageSize: 1,
            drawer: false,
            direction: 'rtl',
            size: '',
            formInline: {
                user: '',
                region: ''
            }
        }
    },
    created() {
        this.getOrderList();
    },
    mounted() {
        let width = document.documentElement.clientWidth;
        this.size = width - 217 + 'px';
    },
    methods: {
        dayjs,
        download() {
            let arr = [...this.tableData];
            arr.forEach(item => {
                item.yudingTime = dayjs(item.yudingTime).format('YYYY-MM-DD HH:mm:ss');
                item.huizongStatus = item.huizongStatus === 1 ? '未汇总' : '已汇总';
            })
            this.DetailsForm = arr;
        },
        // 点击进入订单详情
        OrderDesc(row) {
            this.drawer = true;
        },
        // 选择了table------
        selectChange(selection) {
            // console.log('selection--', selection);
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.selectIds = arr;
            // console.log(this.selectIds);
        },
        // 订单汇总
        // 1.必须选择表格有选中的行  才可以有订单汇总
        // 2.判断selectIds是否有数据存储
        // 3.汇总
        orderCollect() {
            if (this.selectIds.length > 1) {
                this.$confirm('温馨提示：确认是否需要提交所选内容', '汇总确认', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        let ids = this.selectIds.join(',');
                        this.setOrderChangeStatus(ids);
                    })
                    .catch(action => {
                        this.$message({
                            type: 'info',
                            message: '放弃提交汇总'
                        })
                    });
            } else {
                this.$message.error('请选择订单编号至少两个进行订单汇总');
            }
        },
        // 禁用选择按钮-----如果是已汇总状态
        selectFun(row, index) {
            // console.log('row', row);
            if (row.huizongStatus === 2) {
                return false;
            } else {
                return true;
            }
        },
        // 点击分页-------------------
        getPagination(page) {
            console.log(page);
            this.getOrderList(page);
        },
        // 获取订单列表数据接口----------
        async getOrderList(page) {
            let res = await orderList({ page });
            console.log('订单列表数据', res.data);
            if (res.data.status === 200) {
                this.tableData = res.data.data;
                this.pageSize = res.data.pageSize;
                this.total = res.data.total;
            } else {
                console.log('请求失败');
                this.pageSize = 0;
                this.tableData = [];
                this.total = 0;
            }
        },
        // 订单汇总的接口
        async setOrderChangeStatus(ids) {
            let res = await setChangeStatus({ ids });
            console.log('订单汇总接口----', res.data);
            if (res.data.status === 200) {
                this.$message.success('汇总订单成功');
                // 更新视图
                this.getOrderList();
            } else {
                this.$message.error('汇总订单失败');
            }
        }
    }
}
</script>
<style lang="less" scoped>
.order {
    margin: 10px;
}

.list {
    background: #fff;
    padding: 20px;
    margin-top: 10px;
}

.header {
    margin-top: 20px;

    .el-form--inline .el-form-item {
        margin-right: 20px;
    }
}

.header-btn {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 10px;

    .el-button {
        background: orange;
        border: none;
        width: 100px;
        font-weight: bold;
    }
}

.list-content {
    margin-top: 30px;
}
</style>